<!-- 海报 -->
<template>
  <div class="create-poster">
    <!-- vue-qr:生成二维码的插件 -->
    <!-- logoSrc:二维码的logo图片 -->
    <!-- text内容是二维码的扫描出来的内容 -->
    <!-- size:二维码的尺寸 -->
    <!-- callback:回调函数 -->
    <!-- bindElement:二维码是否显示到页面是上 -->
    <!-- 本地图片 -->
    <vue-qr :logoSrc="logoURL" :text="qrText" :size="200" :callback="callback" :bindElement="false"></vue-qr>
    <!-- vue-canvas-poster:生成海报的插件 -->
    <vue-canvas-poster :widthPixels="1200" :painting="painting" @success="success" @fail="fail"
      v-show="false"></vue-canvas-poster>
    <img :src="posterSrc" alt="" class="posterImg" />
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// 1.引入二维码的组件
import VueQr from "vue-qr";
import { VueCanvasPoster } from "vue-canvas-poster";
export default {
  //import引入的组件需要注入到对象中才能使用
  //   2.注册二维码的组件
  components: { VueQr, VueCanvasPoster },
  data() {
    //这里存放数据
    return {
      painting: null,
      posterSrc: null,
    };
  },
  props: ["detailData"],
  //计算属性 类似于data概念
  computed: {
    // 二维码logo的图片
    logoURL() {
      if (this.detailData.goods_thumb.includes('x.dscmall.cn')) {
        // 去掉图片地址中的域名
        var rel = this.detailData.goods_thumb.replace('https://x.dscmall.cn', '');
        return rel
      } else {
        return this.detailData.goods_thumb;
      }
    },
    // 二维码的内容
    qrText() {
      return "https://x.dscmall.cn/mobile#/goods/" + this.detailData.goods_id;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    callback(dataURL) {
      console.log(dataURL);
      //   二维码生成后再生成海报
      this.painting = {
        width: "300px",
        height: "543px",
        background: "#fff",
        views: [
          {
            // 矩形
            type: "rect",
            css: {
              top: "10px",
              left: "80px",
              width: "150px",
              height: "20px",
              color: "#f4f4f4",
              borderRadius: "10px",
              borderWidth: "1px",
              borderColor: "#f4f4f4",
            },
          },
          {
            type: "text",
            text: "推荐一个好物给你,请查收",
            css: {
              top: "15px",
              fontSize: "9px",
              left: "100px",
            },
          },
          {
            type: "image",
            url: this.logoURL,
            css: {
              width: "250px",
              height: "250px",
              top: "50px",
              left: "10%",
            },
          },
          {
            type: "text",
            text: this.detailData.shop_price_formated,
            css: {
              top: "320px",
              fontSize: "16px",
              left: "8%",
              color: "red",
            },
          },
          {
            type: "image",
            url: dataURL,
            css: {
              width: "100px",
              height: "100px",
              top: "360px",
              left: "100px",
            },
          },
        ],
      };
    },
    success(src) {
      console.log(src);
      this.posterSrc = src;
    },
    fail(err) {
      console.log("fail", err);
    },
  },
  beforeCreate() { }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  beforeMount() { }, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，激活
  deactivated() { }, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style>
.posterImg {
  width: 300px;
  height: 543px;
}
</style>